import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Button, Row, Form, Input, Checkbox } from 'antd'
import backgroundImg from '../../../assets/background.jpg'
import { config } from 'utils'
import styles from './index.less'
import logo2 from '../../public/logo2.png'
// import md5 from './md5'

const FormItem = Form.Item
const styles1 = {
  img: {
    width: '80px',
    height: '80px',
    marginRight: '8px',
  },
  pagelogin: {
    position: 'absolute',
    left: 0,
    top: 0,
    height: '100%',
    width: '100%',
    background: 'url(' + backgroundImg + ') center',
    backgroundSize: '100% 100%',
    boxShadow: '0 0 100px rgba(100,100,100,.5)',
    // opacity: 0.6,
    zIndex:1
  }
}

const Login = ({
  loading,
  dispatch,
  login,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll,
    getFieldValue
  },
}) => {
  // console.log(login.state)
  function handleOk() {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      dispatch({ type: 'login/login', payload: values })
    })
  }

  function handleFind() {
 
    dispatch({ type: 'login/retrieveUserPwd', payload: getFieldValue('email') })
   
  }

  return (
    <div style={styles1.pagelogin}>
      <div className={styles.form}>
        <div className={styles.logo}>
          登录
        </div>
        <form>
          <FormItem hasFeedback>
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input onPressEnter={handleOk} placeholder="请输入用户名" />)}
          </FormItem>
 
          <FormItem hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input type="password" onPressEnter={handleOk} placeholder="请输入密码" />)}
          </FormItem>
          <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: localStorage.getItem("password"),
          })(
            <Checkbox>记住密码</Checkbox>
          )} 
            <a className="login-form-forgot" onClick={handleFind}>点击注册</a>
          </FormItem>
          <Row>
            <Button type="primary" onClick={handleOk} loading={loading.effects.login}>
              登录
          </Button>
          </Row>
        </form>
      </div>

    

    </div>
    
  )
}

Login.propTypes = {
  form: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
  login:PropTypes.object,
}

export default connect(({ loading,login }) => ({ loading,login }))(Form.create({
  mapPropsToFields(props) {
    if(localStorage.getItem('email')&&localStorage.getItem('password')){
      return {
        email: Form.createFormField({
          ...props.username,
          value: localStorage.getItem('email'),
        }),
        password: Form.createFormField({
          ...props.password,
          value: localStorage.getItem('password'),
        }),
      }
    }
    else{
      return {
        email: Form.createFormField({
          ...props.username,
          value: '',
        }),
        password: Form.createFormField({
          ...props.password,
          value: '',
        }),
      }
    } 
  }
})(Login))
